<template>
	<view>

		<scroll-view scroll-y="true" style="height: calc(100vh - 76px);">
			<view>
				<image class="imageView" mode="widthFix"
					:src="data.imageOrderCover||'@appstatic/img/my/appoint_img.png'" />

				<view class="title_layout">
					<view class="layout-personal-info">
						<view class="text-1">{{data.testModel}}</view>
						<view class="default-button" v-if="data.testStatus=='2'">{{data.testStatusName}}</view>
						<view class="default-button-no" v-else>{{data.testStatusName}}</view>
					</view>

					<view class="layout-personal-info" style="margin-top: 4px;">
						<image class="small-icon" src="@appstatic/img/my/my_order_address_new_icon.png"
							style="margin-right: 4.5px;" />
						<view class="text-3" style="margin-right: 10px;">
							{{data.testCityName}}
						</view>
					</view>

					<view class="row" style="margin-top: 10px;">
						<text class="text-5">姓名</text>
						<text class="text-2">{{data.testName}}</text>
					</view>
					<view class="row">
						<text class="text-5">联系方式</text>
						<text class="text-2">{{data.testPhone}}</text>
					</view>
					<view class="row">
						<text class="text-5">试驾地区</text>
						<view style="display: flex;flex-direction: row;">
							<text class="text-2"
								v-if="data.testProvinceName!=data.testCityName&&data.testProvinceName!=null">{{data.testProvinceName}}</text>
							<text class="before text-2">{{data.testCityName}}</text>
						</view>

					</view>
					<view class="row">
						<text class="text-5">试驾门店</text>
						
						<text class="text-2" v-if="data.testStoreName!=null||data.testStoreName!=undefined">{{data.testStoreName}}</text>
					</view>
					<text class="text-4">预约单信息</text>
					<view style="width: 100%;height: 1px;background-color: #EDEDED;"></view>
					<view class="row">
						<text class="text-5">预约试驾单号</text>
						<view class="layout-personal-info">
							<text class="text-2">{{data.id}}</text>
							<text class="text-2" style="margin-left: 20px;margin-right: 20px;">|</text>
							<image class="small-icon" src="@appstatic/img/my/my_order_icon.png" @click="copyShare" />
						</view>
					</view>
					<view class="row">
						<text class="text-5">下单时间</text>
						<text class="text-2">{{data.createTime}}</text>
					</view>
				</view>
			</view>

		</scroll-view>

		<view v-if="(data.testStatus=='3') && !data.evaluateStatus" class="evaluateBtn" @click="toEvaluate">评价</view>
		<view v-else-if="data.testStatus=='1'||data.testStatus=='2'" class="cancelOrderBtn" @click="cancelOrder">取消试驾
		</view>


		<clxDialog :isShow='show' @dialogConfirm='dialogConfirm' @dialogCancel='dialogCancel' :title="dialogTitle">
		</clxDialog>


	</view>
</template>

<script>
	const app = getApp();
	const util = require('@utils/util.js');
	const network = require('@manager/network-manager.js');
	import clxDialog from "@components/clx-dialog/clx-dialog";
	export default {
		data() {
			return {
				dialogTitle: '确认取消预约试驾？',
				show: false,
				data: {},
				id:'',
				

			}
		},
		components: {
			clxDialog
		},
		onLoad: function(options) {
			this.id = options.id
			
		},
		onShow() {
			this.getTestDrive(this.id)
		},
		methods: {
			//获取试乘试驾信息
			getTestDrive: function(id) {
				var that = this;
				that.dataList = []
				var uri = app.globalData.config.interfaces.URL_TESTDRIVER_GETTESTDRIVE; //刷新页面配置

				var params = {
					"id": id
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						that.data = res.data;
						if (that.data.testStatus == "1") {
							that.data.testStatusName = "已提交"
						} else if (that.data.testStatus == "2") {
							that.data.testStatusName = "已确认"
						} else if (that.data.testStatus == "3") {
							that.data.testStatusName = "已完成"
						} else if (that.data.testStatus == "4") {
							that.data.testStatusName = "已取消"
						}

					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})


				});
			},

			//取消预约
			cancelOrder(e) {
				this.show = true

			},
			//确定
			dialogConfirm(e) {
				this.show = false
				this.cancelOrderById()
			},
			//取消
			dialogCancel() {
				this.show = false
			},
			//通过id取消订单
			cancelOrderById() {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_TESTDRIVER_CANCELTESTDRIVER;
				var params = {
					"id": this.data.id,
					"loginId": app.getUserId(),
					"cancelTime": util.dateTimeStr('y-m-d h:i:s'),
					"remark": "取消预约试驾"
				};
				network.post(uri, params, 'form').then(res => {
					uni.stopPullDownRefresh();
					if (res.code == 200) {
						var prePage = this.$util.prePage()
						prePage.refreshCancelOrderById(this.data.id);
						uni.showToast({
							title: "取消试驾成功",
							duration: 3000,
							icon: 'none',
							success: () => {
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 2000)
							}
						})
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					console.error(res, 'err')
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);

				});
			},

			//我的评价
			toEvaluate() {
				uni.navigateTo({
					url: `/module_my/pages/orderDetail/orderEvaluate?id=${this.data.id}&listType=0&orderType=test&type=create`
				});
			},
			//评价成功刷新列表
			orderEvaluateSuccess:function(id){
				var that = this
				var prePage = this.$util.prePage()
				prePage.orderEvaluateSuccess(id);
			},
			//复制订单id
			copyShare() {
				uni.setClipboardData({
					//复制的是网站中“预约试驾”页面链接，复制到粘贴板即可
					data: this.data.id,
					success: res => {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000 //时间
						});
					}
				});
			}

		}
	}
</script>

<style>
	@import "./appointmentDetail.css";
</style>
